<template>
    <div>
        <div class="box" @click="status = false">
            <div ref="contRef" id="contRef" class="topLiao">
                <div class="gpts">
                    <!-- {{ item.content }} -->
                    <img src="/src/status/gpt/4.png" class="logoImg" alt="">
                    <div class="rightTitGpt">
                        我是人工智能，请向我提问吧！
                    </div>
                </div>
                <div v-for=" (item, index) in list" :key="index" class="list">
                    <!-- 这个是我自己发送的 -->
                    <div v-if="item.stuta == 1" class="myProblem">
                        <!-- {{ item.content }} -->
                        <img src="/src/status/gpt/3.png" class="logoImgs" alt="">
                        <div class="rightTit">
                            {{ item.content }}
                        </div>
                    </div>
                    <div v-if="item.stuta == 2" class="gpt">
                        <!-- {{ item.content }} -->
                        <img src="/src/status/gpt/4.png" class="logoImg" alt="">
                        <div class="rightTitGpt">
                            <!-- <div v-html="item.content"></div> -->
                            <article class="markdown-body" v-html="item.content"></article>
                            <!-- {{ item.content }} -->
                            <!-- /右下角的复制 -->
                            <div class="rigBot f f-a-c f-j-b">
                                <el-tooltip content="复制到对话框" placement="top" effect="light">
                                    <img @click="copy(list[index - 1].content)" src="/src/status/gpt/1.png" class="leftimg"
                                        alt="">
                                </el-tooltip>
                                <el-tooltip content="添加到常用提示语" placement="top" effect="light">
                                    <img @click="addTips(list[index - 1].content)" src="/src/status/gpt/addTian.png"
                                        class="leftimg" alt="">
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bot"></div>
            </div>
            <div class="botInp">
                <div class="tishi f f-a-c f-j-c">
                    <div @click.stop="status = !status" style="cursor: pointer;" class="f f-a-c f-j-c">
                        <img src=" /src/status/gpt/deng.png" class="deng" alt="">
                        常用提示语
                    </div>
                    <div v-show="status" class="boxs">
                        <div v-for="(item, index) in oldList" class="titleTi f f-a-c f-j-b">
                            <div v-html="item.nmae"></div>
                            <div class="f f-a-c f-j-b">
                                <img src="/src/status/img/10.png" @click="copy(item.nmae)" class="img" alt="">
                                <div class="xian"></div>
                                <img src="/src/status/gpt/addTian.png" class="img" alt="">
                            </div>
                        </div>
                        <div v-if="!oldList.length" style="text-align: center;">暂无常用语</div>
                    </div>
                </div>
                <!-- 这个是滑到底部 -->
                <!-- 这个是滑到底部 -->
                <div class="input">
                    <div class="inpBox">
                        <textarea name="" @keydown="keyDone" v-model="message" :draggable="false" class="inp" id=""
                            placeholder="请输入搜索的内容" cols="30" rows="10"></textarea>
                        <div @click="keyDones" class="rigBtn f f-a-c f-j-c">
                            <img src="/src/status/gpt/comfig.png" class="comfig" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup >
// import "vue-code-highlight/themes/prism-dark.css";
import {
    marked
} from 'marked';
import hljs from 'highlight.js' // 代码块高亮
import 'highlight.js/styles/github.css' // 代码块高亮样式
import 'github-markdown-css' // 整体 markdown 样式
import { ref, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ChatTraffic } from '../../api/index'
let oldList = ref([])
// const mdIt = require("markdown-it");
// const md = new mdIt();
// const code = md.render("# Hello");
const article = marked(' ````let contRef = ref(null)let status = ref(false)let init = ref(null)```` ');
// let code = '<highlightjs language="JavaScript" :autodetect="true" code="vue-code-highlight/themes/prism-dark.css"></highlightjs>'
// 定义数组聊天数据
let list = ref([
    // { stuta: 1, content: '脉冲星是一种快速旋转的中子星，在人类认知中它就是射电脉冲的源头。大多数中子星拥有极强大的磁场，其磁场强度是地球的千万亿倍，并且这个磁场会随着中子星的旋转而旋转。这种旋转磁场的中子星就是我们所要找的脉冲星，那么如何找到它呢？' },
    // { stuta: 2, content: '脉冲星是一种在宇宙中非常特殊的天体，它们以其极端的密度和强大的磁场而闻名。脉冲星的旋转速度极快，通常每秒钟可以旋转数百次甚至上千次。这种高速旋转使得脉冲星产生强烈的辐射，形成了我们观测到的射电脉冲。由于脉冲星的磁场强度极高，它们的磁层甚至可以阻挡掉大量的高能粒子和辐射，保护着脉冲星内部的极端条件。这也使得科学家们更加好奇和向往，想要进一步了解这些神秘的天体。脉冲星的发现是一个漫长的过程。最早的脉冲星是由天文学家贝尔和她的老师休伊什共同发现的，叫做CP1919。之后，人们通过射电望远镜观测到了更多的脉冲星，包括蟹状星云脉冲星、船底座脉冲星、猫头鹰座脉冲星等等。目前，我们主要通过两种方法来寻找脉冲星：一种是通过射电望远镜观测天体辐射，另一种是通过光学望远镜观测天体运动。在观测过程中，我们需要过滤掉其他无用的信号，只保留有用的信号。这需要科学家们具备丰富的经验和技能。' },
    // { stuta: 1, content: '脉冲星是一种快速旋转的中子星，在人类认知中它就是射电脉冲的源头。大多数中子星拥有极强大的磁场，其磁场强度是地球的千万亿倍，并且这个磁场会随着中子星的旋转而旋转。这种旋转磁场的中子星就是我们所要找的脉冲星，那么如何找到它呢？' },
    // { stuta: 2, content: '脉冲星是一种在宇宙中非常特殊的天体，它们以其极端的密度和强大的磁场而闻名。脉冲星的旋转速度极快，通常每秒钟可以旋转数百次甚至上千次。这种高速旋转使得脉冲星产生强烈的辐射，形+成了我们观测到的射电脉冲。由于脉冲星的磁场强度极高，它们的磁层甚至可以阻挡掉大量的高能粒子和辐射，保护着脉冲星内部的极端条件。这也使得科学家们更加好奇和向往，想要进一步了解这些神秘的天体。脉冲星的发现是一个漫长的过程。最早的脉冲星是由天文学家贝尔和她的老师休伊什共同发现的，叫做CP1919。之后，人们通过射电望远镜观测到了更多的脉冲星，包括蟹状星云脉冲星、船底座脉冲星、猫头鹰座脉冲星等等。目前，我们主要通过两种方法来寻找脉冲星：一种是通过射电望远镜观测天体辐射，另一种是通过光学望远镜观测天体运动。在观测过程中，我们需要过滤掉其他无用的信号，只保留有用的信号。这需要科学家们具备丰富的经验和技能。' },
    // { stuta: 1, content: '脉冲星是一种快速旋转的中子星，在人类认知中它就是射电脉冲的源头。大多数中子星拥有极强大的磁场，其磁场强度是地球的千万亿倍，并且这个磁场会随着中子星的旋转而旋转。这种旋转磁场的中子星就是我们所要找的脉冲星，那么如何找到它呢？' },
    // { stuta: 2, content: '脉冲星是一种在宇宙中非常特殊的天体，它们以其极端的密度和强大的磁场而闻名。脉冲星的旋转速度极快，通常每秒钟可以旋转数百次甚至上千次。这种高速旋转使得脉冲星产生强烈的辐射，形成了我们观测到的射电脉冲。由于脉冲星的磁场强度极高，它们的磁层甚至可以阻挡掉大量的高能粒子和辐射，保护着脉冲星内部的极端条件。这也使得科学家们更加好奇和向往，想要进一步了解这些神秘的天体。脉冲星的发现是一个漫长的过程。最早的脉冲星是由天文学家贝尔和她的老师休伊什共同发现的，叫做CP1919。之后，人们通过射电望远镜观测到了更多的脉冲星，包括蟹状星云脉冲星、船底座脉冲星、猫头鹰座脉冲星等等。目前，我们主要通过两种方法来寻找脉冲星：一种是通过射电望远镜观测天体辐射，另一种是通过光学望远镜观测天体运动。在观测过程中，我们需要过滤掉其他无用的信号，只保留有用的信号。这需要科学家们具备丰富的经验和技能。' },
    // { stuta: 1, content: '脉冲星是一种快速旋转的中子星，在人类认知中它就是射电脉冲的源头。大多数中子星拥有极强大的磁场，其磁场强度是地球的千万亿倍，并且这个磁场会随着中子星的旋转而旋转。这种旋转磁场的中子星就是我们所要找的脉冲星，那么如何找到它呢？' },
    // { stuta: 2, content: '脉冲星是一种在宇宙中非常特殊的天体，它们以其极端的密度和强大的磁场而闻名。脉冲星的旋转速度极快，通常每秒钟可以旋转数百次甚至上千次。这种高速旋转使得脉冲星产生强烈的辐射，形成了我们观测到的射电脉冲。由于脉冲星的磁场强度极高，它们的磁层甚至可以阻挡掉大量的高能粒子和辐射，保护着脉冲星内部的极端条件。这也使得科学家们更加好奇和向往，想要进一步了解这些神秘的天体。脉冲星的发现是一个漫长的过程。最早的脉冲星是由天文学家贝尔和她的老师休伊什共同发现的，叫做CP1919。之后，人们通过射电望远镜观测到了更多的脉冲星，包括蟹状星云脉冲星、船底座脉冲星、猫头鹰座脉冲星等等。目前，我们主要通过两种方法来寻找脉冲星：一种是通过射电望远镜观测天体辐射，另一种是通过光学望远镜观测天体运动。在观测过程中，我们需要过滤掉其他无用的信号，只保留有用的信号。这需要科学家们具备丰富的经验和技能。' },
    // { stuta: 1, content: '脉冲星是一种快速旋转的中子星，在人类认知中它就是射电脉冲的源头。大多数中子星拥有极强大的磁场，其磁场强度是地球的千万亿倍，并且这个磁场会随着中子星的旋转而旋转。这种旋转磁场的中子星就是我们所要找的脉冲星，那么如何找到它呢？' },
    // { stuta: 2, content: '脉冲星是一种在宇宙中非常特殊的天体，它们以其极端的密度和强大的磁场而闻名。脉冲星的旋转速度极快，通常每秒钟可以旋转数百次甚至上千次。这种高速旋转使得脉冲星产生强烈的辐射，形成了我们观测到的射电脉冲。由于脉冲星的磁场强度极高，它们的磁层甚至可以阻挡掉大量的高能粒子和辐射，保护着脉冲星内部的极端条件。这也使得科学家们更加好奇和向往，想要进一步了解这些神秘的天体。脉冲星的发现是一个漫长的过程。最早的脉冲星是由天文学家贝尔和她的老师休伊什共同发现的，叫做CP1919。之后，人们通过射电望远镜观测到了更多的脉冲星，包括蟹状星云脉冲星、船底座脉冲星、猫头鹰座脉冲星等等。目前，我们主要通过两种方法来寻找脉冲星：一种是通过射电望远镜观测天体辐射，另一种是通过光学望远镜观测天体运动。在观测过程中，我们需要过滤掉其他无用的信号，只保留有用的信号。这需要科学家们具备丰富的经验和技能。' },
    // { stuta: 1, content: '脉冲星是一种快速旋转的中子星，在人类认知中它就是射电脉冲的源头。大多数中子星拥有极强大的磁场，其磁场强度是地球的千万亿倍，并且这个磁场会随着中子星的旋转而旋转。这种旋转磁场的中子星就是我们所要找的脉冲星，那么如何找到它呢？' },
    // { stuta: 2, content: '脉冲星是一种在宇宙中非常特殊的天体，它们以其极端的密度和强大的磁场而闻名。脉冲星的旋转速度极快，通常每秒钟可以旋转数百次甚至上千次。这种高速旋转使得脉冲星产生强烈的辐射，形成了我们观测到的射电脉冲。由于脉冲星的磁场强度极高，它们的磁层甚至可以阻挡掉大量的高能粒子和辐射，保护着脉冲星内部的极端条件。这也使得科学家们更加好奇和向往，想要进一步了解这些神秘的天体。脉冲星的发现是一个漫长的过程。最早的脉冲星是由天文学家贝尔和她的老师休伊什共同发现的，叫做CP1919。之后，人们通过射电望远镜观测到了更多的脉冲星，包括蟹状星云脉冲星、船底座脉冲星、猫头鹰座脉冲星等等。目前，我们主要通过两种方法来寻找脉冲星：一种是通过射电望远镜观测天体辐射，另一种是通过光学望远镜观测天体运动。在观测过程中，我们需要过滤掉其他无用的信号，只保留有用的信号。这需要科学家们具备丰富的经验和技能。' },
])
// 定义ref
let message = ref('')
let contRef = ref(null)
let status = ref(false)
let init = ref(null)
onMounted(() => {
    oldList.value = JSON.parse(localStorage.getItem('oldList')) || []
})
// /滑动到底部
const handleScroll = () => {
    nextTick(() => {
        let msg = document.getElementById('contRef') // 获取对象
        msg.scrollTop = msg.scrollHeight // 滚动高度
    })
}
// /点击添加到常用语
const addTips = (str) => {
    console.log(str);
    if (oldList.value.length < 2) {
        oldList.value.push({ nmae: str })
        ElMessage.success('添加成功')
    } else if (oldList.value.length == 2) {
        oldList.value.shift()
        oldList.value.push({ nmae: str })
        ElMessage.success('添加成功')
    }
    localStorage.setItem('oldList', JSON.stringify(oldList.value))
}
// /点击复制
const copy = (str) => {
    message.value = String(str).replace(/<br>/g, '\n')
    // let n = String(str).replace(/<br>/g, '\n')
    // console.log(n, '123456');
    status.value = false
}
// 点击确认
const keyDones = () => {
    if (!message.value) {
        return ElMessage('请输入搜索内容')
    }
    list.value.push({ stuta: 1, content: message.value })
    list.value.push({
        stuta: 2,
        content: '...'
    })
    setTimeout(() => {
        let url = 'http://ceshifanyi.haiba.tech/index.php/api/chat_stream/sendChat?message=' + message.value;
        let source = new EventSource(url, {
            type: 'text/html',
            headers: {
                accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7'
            }
        });
        // 链接成功后push机器人的聊天
        source.onopen = function (e) {
            console.log('连接成功 .....')
            message.value = ''
            list.value[list.value.length - 1].content = ''

        }
        handleScroll()
        let contents = "";
        source.onmessage = function (event) {
            let data = event.data;
            console.log("连接中 ...")
            console.log(JSON.parse(event.data));

            // 解析文本
            if (data != "[DONE]") {
                let info = JSON.parse(data)
                if (info["choices"][0]["finish_reason"] != "stop") {
                    contents = info["choices"][0]["delta"]["content"];
                    console.log(JSON.stringify(info["choices"][0]["delta"]["content"]));
                }
            }
            handleScroll()
            list.value[list.value.length - 1].content += contents
            // list.value[list.value.length - 1].content += String(contents).replace('\n', '<br>')
        }
        source.onerror = async function (err) {
            //当发送完之后求情接口
            // let m = list.value[list.value.length - 1].content
            let m = String(list.value[list.value.length - 1].content).replace(/<br>/g, '\n')

            list.value[list.value.length - 1].content = marked.parse(list.value[list.value.length - 1].content, {
                highlight: function (code, lang) {
                    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                    return hljs.highlight(code, { language }).value;
                }
            });
            await ChatTraffic({
                content: m
            })
            handleScroll()
            // 链接失败后push机器人的聊天
            console.log(m, '连接失败 .....')
            source.close();
        }
    }, 1000)
}
// 点击确认
const keyDone = (e) => {
    // 这个是加自己的聊天
    if (e.code == 'Enter') {
        if (!message.value) return ElMessage('请输入搜索内容')
        list.value.push({ stuta: 1, content: message.value })
        list.value.push({
            stuta: 2,
            content: '...'
        })
        handleScroll()
        setTimeout(() => {
            console.log(e, '.............55555555555');
            let url = 'http://ceshifanyi.haiba.tech/index.php/api/chat_stream/sendChat?message=' + message.value;
            let source = new EventSource(url, {
                type: 'text/html',
                headers: {
                    accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7'
                }
            });
            // 链接成功后push机器人的聊天
            source.onopen = function (e) {
                console.log('连接成功 .....')
                message.value = ''
                list.value[list.value.length - 1].content = ''

            }
            let contents = "";
            source.onmessage = function (event) {
                let data = event.data;
                console.log("连接中 ...")
                console.log(JSON.parse(event.data));

                // 解析文本
                if (data != "[DONE]") {
                    let info = JSON.parse(data)
                    if (info["choices"][0]["finish_reason"] != "stop") {
                        contents = info["choices"][0]["delta"]["content"];
                        console.log(JSON.stringify(info["choices"][0]["delta"]["content"]));
                    }
                }
                handleScroll()
                // list.value[list.value.length - 1].content += String(contents).replace('\n', '<br>')
                list.value[list.value.length - 1].content += String(contents)
            }
            source.onerror = async function (err) {
                // 链接失败后push机器人的聊天
                //当发送完之后求情接口
                // let m = list.value[list.value.length - 1].content
                let m = String(list.value[list.value.length - 1].content).replace(/<br>/g, '\n')
                console.log(list.value, '00000000000');
                list.value[list.value.length - 1].content = marked.parse(list.value[list.value.length - 1].content, {
                    highlight: function (code, lang) {
                        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                        return hljs.highlight(code, { language }).value;
                    }
                });
                await ChatTraffic({
                    content: m
                })
                handleScroll()
                console.log('连接失败 .....')
                source.close();
            }
        }, 1000)
    }
}
</script>
<style scoped>
@import './index.scss';
</style>